<template>
	<view>
		<!-- <view class="top-title">
			<view class="blue" @click="cancel">取消</view>
			<view class="black">{{this.name}}</view>
			<view class="blue" @click="save">保存</view>
		</view> -->
		<uni-nav-bar left-text="取消" right-text="保存"  @clickLeft="cancel" @clickRight="save" :title="this.name" />
	<!-- <view><uni-nav-bar left-icon="arrowleft" title="标题"  />11</view> -->
		<view class="main">
			<view class="car-info">车辆信息</view>
			<view class="top-box">
				<ul class="ul-list">
					<li>
						<view class="title-first">
							<span>车号</span>
						</view>
						<view class="title-second">
							<span>{{this.trainNo}}</span>
						</view>
					</li>
					<li>
						<view class="title-first">
							<span>车型</span>
						</view>
						<view class="title-second">
							<span>{{this.code}}</span>
						</view>
					</li>
					<li>
						<view class="title-first">
							<span>状态</span>
						</view>
						<view class="title-second">
							<span>{{this.productionState}}</span>
						</view>
					</li>
						<!-- <li>
						<view class="title-first">
							<span>信息一</span>
						</view>
						<view class="title-second">
							<span>{{this.listOne.infoOne}}</span>
						</view>
					</li>
					<li>
						<view class="title-first">
							<span>信息二</span>
						</view>
						<view class="title-second">
							<span>{{this.listOne.infoTwo}}</span>
						</view>
					</li>
					<li>
						<view class="title-first">
							<span>信息三</span>
						</view>
						<view class="title-second">
							<span>{{this.listOne.infoThree}}</span>
						</view>
					</li> -->

				</ul>
			</view>
			<!-- 第一部分的四个 -->
			<view class="entrance">入厂鉴定</view>
			<view class="middle-first">
				<view class="input-box-special">
					<view><span>转向架型号</span><span class="red red-special">*</span></view>
					<!-- <view class="gray">点击选择<u-icon name="arrow-right"></u-icon></view> -->
					<view>
						<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="bogieModel" />
					</view>
				</view>
				<!-- 总数222222222 -->
				<view class="input-box">
					<view><span>制动缸直径</span><span class="red">*</span></view>
					<view>
						<u-input class='input-text' input-align="right" placeholder='点击填写'
							v-model="brakeCylinderDiam" />
					</view>
				</view>
				<view class="input-box">
					<view><span>制动缸型号</span><span class="red">*</span></view>
					<view>
						<u-input class='input-text' input-align="right" placeholder='点击填写'
							v-model="brakeCylinderModel" />
					</view>
				</view>
				<view class="input-box">
					<view><span>制动缸尺寸</span><span class="red">*</span></view>
					<view>
						<u-input class='input-text' input-align="right" placeholder='点击填写'
							v-model="brakeCylinderSize" />
					</view>
				</view>
				<view class="input-box">
					<view><span>闸调器型号</span><span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="brakeRegulatorModel" />
				</view>

				<view class="input-box">
					<view><span>空重车调整装置</span><span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="emptyHeavyAdjustment" />
				</view>
				<!-- 总数22222222 -->
				<view class="input-box">
					<view><span>手制动机型式</span><span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="handBrakeType" />
				</view>
				<view class="input-box">
					<view><span>阀型</span><span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="valveType" />
				</view>
			</view>

			<!-- 第二部分的四个 -->
			<view class="middle-first">
				<view class="input-box">
					<view>前制动杠杆<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="frontBrakeLever" />
				</view>
				<view class="input-box">
					<view>后制动杠杆<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="rearBrakeLever" />
				</view>
				<view class="input-box">
					<view>附加杠杆<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="additionalLever" />
				</view>
				<view class="input-box">
					<view>控制杠杆<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="controlLever" />
				</view>
			</view>
			<!-- 第三部分的三个 -->
			<view class="middle-first">
				<view class="input-box">
					<view>一位拉杆<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="firstPositionLever" />
				</view>
				<view class="input-box">
					<view>二位拉杆<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="secondPositionLever" />
				</view>
				<view class="input-box">
					<view>手制动拉杆<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="handBrakeLever" />
				</view>
				<view class="input-box">
					<view>闸瓦型别<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写' v-model="brakeShoeType" />
				</view>
				<view class="input-box">
					<view>低摩改造<span class="red">*</span></view>
					<u-input class='input-text' input-align="right" placeholder='点击填写'
						v-model="lowFrictionTransformation" />
				</view>
			</view>
				<view class="entrance" >车辆位置</view>
			<view class="middle-first">
				<view class="input-box">
					<view>位置关系<span class="red">*</span></view>
					<!-- <u-input class='input-text' input-align="right" placeholder='位置关系'  /> -->
					<u-form-item>
						<u-input v-model="position" type="select" placeholder="位置关系" @click="showInfo = true"/>
					</u-form-item>
					<u-action-sheet :list="list" v-model="showInfo" :tips="tips" @click="actionSheetCallback"></u-action-sheet>
				</view>
			</view>
			<!-- 加号 -->
			<view class="add"  @click="showField = true">
				<view class="add-text">特殊标识</view>
				<view class="add-blue">
					<u-icon name="plus"></u-icon>
				</view>
				<u-action-sheet :list="listField" v-model="showField" :tips="tipsField" @click="actionSheetCallbackField"></u-action-sheet>
			</view>
			<!-- 自定义值 -->
			<view class="middle-first">
				<view class="input-box-spe" v-for="(item,index) in customList" :key="index">
					<view class="custom-title">{{item.custom}}</view>
					<u-input class='input-text' input-align="left" placeholder='点击填写' v-model="item.inputValue" />
					<u-button type="error" size="mini" class="del-btn" @click="delNode(item)">删除</u-button>
				</view>
				<!-- <view class="input-box">
						<view>字段2</view>
						<u-input  class='input-text' input-align="right" placeholder='点击填写' v-model="titleB" />
					</view>
					<view class="input-box ">
						<view>字段3</view>
						<u-input  class='input-text' input-align="right" placeholder='点击填写' v-model="titleC" />
					</view> -->
			</view>
		<!-- 	<u-modal v-model="show" title="输入自定义字段" show-cancel-button @confirm="confirmText">
				<view class="input-custom">
					<u-input v-model="valueCustom" :border="border" placeholder='输入自定义值' />
				</view>
			</u-modal> -->
		</view>
	</view>
</template>

<script>
	import {
		PlanApi
	} from "./api/index.js"
	// import  Api   from "../../common/api/api.js"
	export default {
		data() {
			return {
				planId: '', //传过来的id
				brakeCylinderSize: "", //制动缸尺寸
				brakeRegulatorModel: "", //闸调器型号
				bogieModel: "", //转向架型号
				brakeCylinderDiam: "", //制动杆直径
				brakeCylinderModel: "", //制动杆型号
				emptyHeavyAdjustment: "", //空重车调整装置
				handBrakeType: "", //手制动机型式
				valveType: "", //阀型
				frontBrakeLever: "", //前制动杠杆
				rearBrakeLever: "", //后制动杠杆
				additionalLever: "", //附加杠杆
				controlLever: "", //控制杠杆
				firstPositionLever: "", //一位杠杆
				secondPositionLever: "", //二位杠杆
				handBrakeLever: "", //手制动拉杆
				brakeShoeType: "", //闸瓦型别
				lowFrictionTransformation: "", //低摩改造
				position: "", //位置关系
				name: "", //车名
				productionState: '', //状态
				trainNo: '', //车号
				code: '', //车型
				valueCustom: '', //模态框里面输入框的值
				show: false, //控制模态框
				fieldId:'',//自定义字段id
				//自定义字段
				border: true,
				tips: {
					text: '请选择位置关系',
					color: '#909399',
					fontSize: 24

				},
				list: [
					// {
					// 	text: '一位东'
					// },
					// {
					// 	text: '二位西'
					// }
				],//位置信息
				showInfo: false,//控制位置信息
				tipsField: {
					text: '请选择特殊字符',
					color: '#909399',
					fontSize: 24
				
				},//特殊字符
				listField: [
					// {
					// 	text:"没有特殊字符",
					// }
				],//特殊字符
				showField: false,//控制特殊字符
				// openFiled:false,//逻辑控制
				customList: [
					// {
					// 	custom: "字段1",
					// },
					// {
					// 	custom: "字段2",
					// },
					// {
					// 	custom: "字段3",
					// },

				],

				//第一个盒子
				dataA: [{
					carNum: 4826529,
					carType: "C64T",
					state: "制动解体完工",
					infoOne: "XXXXXX",
					infoTwo: "XXXXXX",
					infoThree: "XXXXXX"
				}],
				listOne: '', //接受第一个格子的数据
				//最后三个自定义的值
				// titleA:"值1",
				// titleB:"值2",
				// titleC:"值3",
				// listA:[
				// 	//第二部分四个输入框
				// 	{title:"前制动杠杆"},
				// 	{title:"后制动杠杆"},
				// 	{title:"附加杠杆"},
				// 	{title:"控制杠杆"}
				// ],
				// listB:[
				// 	//第三部分三个输入框
				// 	{title:"一位拉杆"},
				// 	{title:"二位拉杆"},
				// 	{title:"手制动拉杆"}
				// ],
			};
		},
		methods: {
			//传特殊字符
			sendFiled(){
				// console.log(111);
				let para ={}
				this.customList.forEach((item,index)=>{
					console.log(item.inputValue);
					console.log(item.custom);
					if(item.inputValue==""){
						para[item.custom]=item.custom
					} else {
						para[item.custom]=item.inputValue
					}
				})
				return para
				
			},
			
			
			actionSheetCallback(index){
				this.position = this.list[index].text
				// console.log(this.position);
			},
			//特殊字符
			actionSheetCallbackField(index){
				this.showField = this.listField[index].text
				let flag = true;
				this.customList.forEach((item)=>{
					if(item.custom==this.listField[index].text){
						flag = false;
					}
				})
				if(flag){
					this.customList.push({custom:this.showField,inputValue:""})
				}
			
				// console.log(index);
				// console.log("309行");
				// console.log(this.position);
			},
			// addWord() {
			// 	console.log(111);
			// 	this.show = true
			// },
			//添加数组
			// confirmText() {
			// 	console.log(111);
			// 	if (this.valueCustom != '') {
			// 		this.customList.push({
			// 			custom: this.valueCustom
			// 		})
			// 		uni.showToast({
			// 			title: "添加成功",
			// 			icon: "success"
			// 		})
			// 		this.valueCustom = ''
			// 		// console.log("不为空");
			// 	} else {
			// 		uni.showToast({
			// 			title: "请输入字段",
			// 			icon: "error"
			// 		})
			// 	}
			// },
			delNode(item) {
				uni.showModal({
					title: "确认要删除吗",
					success: (res) => {
						if (res.confirm) {
							this.customList.forEach((value, index) => {
								if (item.custom == value.custom) {
									this.customList.splice(index, 1)
								}
							})
						} else if (res.cancel) {
							console.log("用户点击了取消");
						}
					}
				})
			},

			cancel() {
				uni.reLaunch({
					url: "../index/index"
				})
			},
			save() {
				let params = {
					planId: this.planId, //穿过来的id
					brakeCylinderSize: this.brakeCylinderSize, //制动缸尺寸
					brakeRegulatorModel: this.brakeRegulatorModel, //闸调器型号
					bogieModel: this.bogieModel, //转向架型号
					brakeCylinderDiam: this.brakeCylinderDiam, //制动杆直径
					brakeCylinderModel: this.brakeCylinderModel, //制动杆型号
					emptyHeavyAdjustment: this.emptyHeavyAdjustment, //空重车调整装置
					handBrakeType: this.handBrakeType, //手制动机型式
					valveType: this.valveType, //阀型
					frontBrakeLever: this.frontBrakeLever, //前制动杠杆
					rearBrakeLever: this.rearBrakeLever, //后制动杠杆
					additionalLever: this.additionalLever, //附加杠杆
					controlLever: this.controlLever, //控制杠杆
					firstPositionLever: this.firstPositionLever, //一位杠杆
					secondPositionLever: this.secondPositionLever, //二位杠杆
					handBrakeLever: this.handBrakeLever, //手制动拉杆
					brakeShoeType: this.brakeShoeType, //闸瓦型别后端没有
					lowFrictionTransformation: this.lowFrictionTransformation, //低摩改造后端没有
					position: this.position,//位置关系
					selfField:this.sendFiled()
				}
				// let para = JSON.stringify(params)
				// console.log(aaa);
				console.log(params);
				PlanApi.listSave(params).then(res => {
					console.log(res);

				})
				// console.log(111);
				uni.reLaunch({
					url:"../index/index"
				})
			},
			//请求详情
			getDetails(carId) {
				// let params = {
				// 	id: carId,
				// }
				// console.log(params.id);
				// Api.httpGet(`/brakeAssemblePlan/identifyCheck/${params.id}`,).then(res=>{
				// 	console.log(res);
				// })
				PlanApi.listDetails(carId).then(res => {
					console.log(carId);
					console.log(res);
					if (res.data != undefined) {
						console.log(11122222);
						this.brakeCylinderSize = res.data.brakeCylinderSize //制动缸尺寸
						this.brakeRegulatorModel = res.data.brakeRegulatorModel //闸调器型号
						this.bogieModel = res.data.bogieModel //转向架型号
						this.brakeCylinderDiam = res.data.brakeCylinderDiam //制动杆直径
						this.brakeCylinderModel = res.data.brakeCylinderModel //制动杆型号
						// this.brakeCylinderSize = res.data.brakeCylinderSize //制动缸尺寸
						// this.brakeRegulatorModel =  res.data.brakeRegulatorModel //闸调器型号
						this.emptyHeavyAdjustment = res.data.emptyHeavyAdjustment //空重车调整装置
						this.handBrakeType =  res.data.handBrakeType //手制动机型式
						this.valveType =  res.data.valveType //阀型
						this.frontBrakeLever = res.data.frontBrakeLever //前制动杠杆
						this.rearBrakeLever = res.data.rearBrakeLever //后制动杠杆
						this.additionalLever = res.data.additionalLever //附加杠杆
						this.controlLever = res.data.controlLever //控制杠杆
						this.firstPositionLever = res.data.firstPositionLever //一位杠杆
						this.secondPositionLever = res.data.secondPositionLever //二位杠杆
						this.handBrakeLever = res.data.handBrakeLever //手制动拉杆
						this.brakeShoeType = res.data.brakeShoeType //闸瓦型别
						this.lowFrictionTransformation = res.data.lowFrictionTransformation //低摩改造
						this.position = res.data.position //位置信息
						// this.valueCustom=res.data.valueCustom//模态框里面输入框的值
					} else {
						console.log("我了");
					}
				})
			},
		},
		created() {
			this.getDetails(this.planId)
			// console.log(Api);
			this.dataA.forEach((item) => {
				// console.log(item);
				// console.log(item.carNum);
				this.listOne = item
				// console.log(this.listOne);
			})
			//位置关系
			PlanApi.show('positionalRelationship').then(res=>{
				console.log(res);
				let positionValue = res.data.value.split(",")
				console.log(positionValue);
				positionValue.forEach((item,index) =>{
					// console.log(item);
					this.list.push({"text":item})
				})
				// this.list.push({"text":res.data.value})
				console.log(this.list);
			})
			//"5b6b01daa75e757950e66735"
			//特殊字符
			PlanApi.getFiled(this.fieldId).then(res=>{
				console.log(res);
				// console.log(res.data);
				if(res.data.selfField!=null) {
					// this.openField=true
					res.data.selfField.forEach((item,index) =>{
						console.log(item);
						this.listField.push({text:item})
					})
				} 
 			})
		},
		onLoad(options) {
			console.log(options);
			// this.getDetails(options.id);
			this.planId = options.id
			this.name = options.name
			this.productionState = options.productionState
			this.trainNo = options.trainNo
			this.code = options.code
			this.fieldId= options.idSpe
			// this.getDetails();
		}
	}
</script>

<style lang="scss" scoped>
	// .top-title {
	// 	// height: 120rpx;
	// 	padding: 30rpx 20rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	font-size: 36rpx;
	// }

	// .blue {
	// 	color: #0079FE;
	// }

	// .black {
	// 	width: 256rpx;
	// 	color: black;
	// 	font-weight: bold;
	// }
	/deep/ .uni-nav-bar-text {
		 font-size: 32rpx;
		 font-weight: bold;
	}
    /deep/ .uni-nav-bar-right-text {
		font-size: 32rpx !important;
		color: #0079FE !important;
	}
	/deep/ .uni-navbar-btn-text span {
		font-size: 32rpx !important;
		color: #0079FE !important;
	}
	
	.main {
		// width: 100%;
		// height: 1900rpx;
		height: calc(100vh - 92rpx);
		overflow: scroll;
		background-color: #efefef;

	}

	.car-info {
		margin: 10rpx 0;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}

	.entrance {
		// padding: 25rpx 0;
		margin: 10rpx 0;
		text-align: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
	.add-text {
		margin-left: 316rpx;
	}
	.top-box {
		/* #ifdef H5 */
		margin-top: 4rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-top: 50px;

		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: 50px;

		/* #endif */

		border-top: 1px solid #eeeeee;
		background-color: white;
	}

	.ul-list {
		overflow: hidden;
		padding: 0;
	}

	li {
		margin-top: 20rpx;
		// padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		width: 250rpx;
		// height: 100rpx;
		float: left;
		text-align: center;
	}

	.title-first {
		font-size: 32rpx;
		color: #cccccc;
		padding: 10rpx 0;
	}

	.title-second {
		font-size: 30rpx;
		color: #999999;
	}

	.middle-first {
		margin-top: 20rpx;
		background-color: white;
	}

	.del-btn {
		margin-left: 240rpx;
		margin-top: 24rpx;
	}

	.input-box {
		font-size: 32rpx;
		display: flex;
		// justify-content: space-around;
		justify-content: space-between;
		border-bottom: 1px solid #eeeeee;
		// height: 100rpx;
		// width: 100%;
		line-height: 100rpx;
		padding: 0px 20rpx;
	}

	.default-value {
		width: 330rpx;

	}

	.input-custom {
		width: 510rpx;
		height: 80rpx;
		margin: 30rpx auto;
	}

	// .aaaaaa {
	// 	padding-top: 10rpx;
	// }
	.input-box-spe {
		font-size: 32rpx;
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #eeeeee;
		// height: 100rpx;
		// width: 100%;
		// line-height: 100rpx;
		padding: 0px 20rpx;
		// padding-top: 10rpx;
	}

	.input-text {
		margin: 16rpx;
	}

	.red {
		color: red;
	}

	.input-box-special>view:nth-of-type(1) {
		float: left;
		margin-left: 20rpx;
		/* #ifdef MP-WEIXIN */
		margin-left: 32px;
		/* #endif */
	}

	.input-box-special>view:nth-of-type(2) {
		float: right;
		margin-right: 20rpx;
		/* #ifdef MP-WEIXIN */
		margin-right: 56rpx;
		/* #endif */
	}

	.input-box-special {
		overflow: hidden;
		// width: 100%;
		// height: 100rpx;
		line-height: 50px;
		border-bottom: 1px solid #eeeeee;

	}

	.gray {
		color: #b2b2b2;
	}

	.add {
		// width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		// padding: 0px 20rpx;
		margin: 10rpx 0;
		font-size: 32rpx;
		// color: #999999;
		line-height: 60rpx;
	}

	.add-blue {
		font-size: 32rpx;
		color: #3478F7;
		margin-right: 40rpx;
	}

	/* #ifdef MP-WEIXIN */
	.red {
		margin-left: -30px;
	}

	.red-special {
		margin-left: 16px;
	}

	/* #endif */


	.custom-title {
		width: 200rpx;
		// margin-top: 10rpx;
		padding: 24rpx 0;
	}
</style>
